<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .landIn {
      display: flex;
      white-space: pre;
    }
    
    .landIn span {
      animation: landIn 0.8s ease-out both;
    }
    
    @keyframes landIn {
      from {
        opacity: 0;
        transform: translateY(-20%);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>

<body>
  <p class="landIn">Ano hi watashitachi mada shiranai no Fushigi no monogatari desu.</p>
</body>

<script>
  let landInTexts = document.querySelectorAll(".landIn");
  landInTexts.forEach(landInText => {
    let letters = landInText.textContent.split("");
    landInText.textContent = "";
    letters.forEach((letter, i) => {
      let span = document.createElement("span");
      span.textContent = letter;
      span.style.animationDelay = `${i * 0.05}s`;
      landInText.append(span);
    });
  });
</script>

</html>